<template>
  <div class="main">
    <!-- <mt-header fixed title="统计图"></mt-header> -->
    <div class="title">
      <h1 class="tit">标签管理</h1>
      <mt-button class="tit2" :style="add_btn" @click="addTable">新增标签</mt-button>
    </div>

    <div class="btn_source">
      <mt-button :type="active==1?'primary':'default'" @click="bt1" class="btn">支出</mt-button>
      <mt-button :type="active==2?'primary':'default'" @click="bt2" class="btn">收入</mt-button>
    </div>
    <mt-tab-container v-model="active">
      <mt-tab-container-item id="1">
        <mt-cell v-for="(item,index) in list" :title="item.label" :key="index">
          <img src="@/assets/img/dele.png" alt class="mtab_img" @click="del(item.label)" />
        </mt-cell>
        <div class="bottoms"></div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <mt-cell v-for="(item,index) in list2" :title="item.label" :key="index">
          <img src="@/assets/img/dele.png" alt class="mtab_img" @click="dels(item.label)" />
        </mt-cell>
        <div class="bottoms"></div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
import { MessageBox } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  name: "labelhome",
  data() {
    return {
      list: [],
      list2: [],
      active: "1",
      add_btn: {
        width: "30%",
        "background-color": "#3742fa",
        color: "#fff",
        height: "30px",
        position: "absolute",
        left: "65%",
        top: "34%",
      },
      inputValue: "", //新增标签输入存储
    };
  },
  mounted() {
    this.list = this.$store.state.list;
    this.list2 = this.$store.state.list2;
  },
  methods: {
    bt1() {
      this.active = "1";
    },
    bt2() {
      this.active = "2";
    },
    //新增标签
    addTable() {
      MessageBox.prompt("♪(^∇^*)", "请输入新标签", { closeOnClickModal: false })
        .then((value) => {
          if (this.active == "1") {
            this.$store.commit("addExpendList", { label: value.value });
            if (window.localStorage.getItem("expendL")) {
              let exl = JSON.parse(window.localStorage.getItem("expendL"));
              exl.push({ label: value.value });
              window.localStorage.setItem("expendL", JSON.stringify(exl));
            } else {
              window.localStorage.setItem(
                "expendL",
                JSON.stringify([{ label: value.value }])
              );
            }
            //删除吐司
            let to = Toast("添加成功！");
            setTimeout(() => {
              to.close();
            }, 700);
          } else if (this.active == "2") {
            this.$store.commit("addIncomeList", { label: value.value });
            if (window.localStorage.getItem("incomeL")) {
              let exl = JSON.parse(window.localStorage.getItem("incomeL"));
              exl.push({ label: value.value });
              window.localStorage.setItem("incomeL", JSON.stringify(exl));
            } else {
              window.localStorage.setItem(
                "incomeL",
                JSON.stringify([{ label: value.value }])
              );
            }
            //删除吐司
            let to = Toast("添加成功！");
            setTimeout(() => {
              to.close();
            }, 700);
          }
        })
        .catch(() => {
          // console.log("cel");
          //删除吐司
          let to = Toast("取消添加。");
          setTimeout(() => {
            to.close();
          }, 700);
        });
    },
    del(val) {
      MessageBox.confirm(`确定删除‘${val}’吗`, { closeOnClickModal: false })
        .then(() => {
          this.$store.commit("deleteExpendList", val);
          let tos = Toast('删除成功！')
          setTimeout(()=>{
            tos.close()
          },800)
        })
        .catch(() => {
          let tos = Toast('取消删除。')
          setTimeout(()=>{
            tos.close()
          },500)
        });
    },
    dels(val) {
      MessageBox.confirm(`确定删除‘${val}’吗`, { closeOnClickModal: false })
        .then(() => {
          this.$store.commit("deleteIncomeList", val);
          let tos = Toast('删除成功！')
          setTimeout(()=>{
            tos.close()
          },800)
        })
        .catch(() => {
          let tos = Toast('取消删除。')
          setTimeout(()=>{
            tos.close()
          },500)
        });
    },
  },
};
</script>

<style scope>
.btn_source {
  display: flex;
  justify-content: center;
}
.mint-button--normal {
  width: 50%;
}
h1 {
  display: inline;
}
.title {
  display: flex;
  position: relative;
}
/* //顶起来 */
.bottoms {
  height: 54px;
  width: 100%;
}
.mtab_img {
  height: 48px;
  transform: scale(0.3, 0.3);
}
</style>